import React, { Component, Fragment } from 'react';
import Admin from "../../router/admin"
import { Layout, Menu, Modal, message } from 'antd';
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined,
  ExclamationCircleOutlined,
  EyeOutlined
} from '@ant-design/icons';
import "../../assets/layout.css"
import LogoHead from "../../assets/logo.png"
import url from "../../config/url"
import req from "../../http/req"
import { Link } from 'react-router-dom';
import CheckLogin from "../../hoc/checkLogin"

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

const acl = JSON.parse(sessionStorage.getItem("acl"))
const menu = acl.map(item => {
  // console.log(item)
  return item.children.length ? <SubMenu icon={<EyeOutlined />} key={item.auth_path} title={item.auth_name}>
    {item.children.map(items => 
      items.is_nav ? <Menu.Item key={items.auth_path}>
        <Link to={items.auth_path}>{items.auth_name}</Link>
      </Menu.Item> : <Fragment key={items.auth_path}></Fragment>
    )}
  </SubMenu> : 
      <Menu.Item key={item.auth_path} icon={<EyeOutlined />}>
        <Link to={item.auth_path}>{item.auth_name}</Link>
      </Menu.Item>
})

class Dashboard extends Component {
  state = {
    collapsed: false,
    theme: 'dark',
    selectedKey: [this.props.location.pathname],
    openKey: [this.props.location.pathname.split("/").splice(0, 3).join("/")]
  };

  render() {
    return (
      <div style={{ height: "100%" }}>
        <Layout style={{ height: "100%" }}>
          <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
            <div className="logo" style={{ padding: "15px", borderBox: "box-sizing" }}>
              <img src={LogoHead} style={{ width: "100%", height: "100%" }} alt="hhh" />
            </div>
            <Menu
              theme={this.state.theme}
              onClick={this.handleClick}
              style={{ width: "100%" }}
              // defaultOpenKeys={['sub1']}
              selectedKeys={[this.state.current]}
              mode="inline"
              defaultSelectedKeys={this.state.selectedKey}
              defaultOpenKeys={this.state.openKey}
            >
              {menu}
            </Menu>
          </Sider>
          <Layout className="site-layout">
            <Header className="site-layout-background" style={{ padding: "5 5" }}>
              {React.createElement(this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                className: 'trigger',
                onClick: this.toggle,
              })}
              <span style={{ marginLeft: "20px" }}>您好，{this.state.username}! 上次登录于 {this.state.addr}（{this.state.ip}）[<span onClick={this.confirm} style={{color: "blue", cursor: "pointer"}}>注销登录</span>]</span>
            </Header>
            <Content
              className="site-layout-background"
              style={{
                margin: '24px 16px',
                padding: 24,
                minHeight: 280,
              }}
            >
              <Admin></Admin>
            </Content>
          </Layout>
        </Layout>
      </div>
    );
  }

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };
// 获取当前管理员信息
  componentDidMount () {
    req.get(url.GetAdminInfo)
    .then(res => {
      // console.log(res)
        if (res.data.errNo === 0) {
          this.setState({
            username: res.data.accountInfo.username,
            ip: res.data.accountInfo.last_ip,
            addr: res.data.accountInfo.last_login_addr.state  + " " + res.data.accountInfo.last_login_addr.isp
          })
        }
      })
    // console.log(JSON.parse(sessionStorage.getItem("acl")))
  }

  // 注销登录
  confirm = () => {
    Modal.confirm({
      title: '确认提醒',
      icon: <ExclamationCircleOutlined />,
      content: '您确认注销本次登录吗 ？',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        sessionStorage.removeItem("jwt")
        sessionStorage.removeItem("acl")
        message.success("注销成功", 2, () => {
          this.props.history.push("/login")
        })
      }
    });
  }

  handleClick = e => {
    // console.log('click ', e);
    this.setState({
      current: e.key,
    });
  };

}

export default CheckLogin(Dashboard);
